<%@ taglib prefix="html" uri="http://struts.apache.org/tags-html"%>
<%@ taglib prefix="bean" uri="http://struts.apache.org/tags-bean"%>
<%@ taglib prefix="logic" uri="http://struts.apache.org/tags-logic"%>
<%@ taglib prefix="core" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="display" uri="http://displaytag.sf.net"%>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="id" lang="id">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
	<script type="application/javascript" src="scripts/jscharts.js"> </script>
<!-- 	<script type="application/javascript" src="scripts/awesomechart.js"> </script> -->
<script>
		window.addEvent('domready', function(){ 
			new Picker.Date('vista1', {
				pickerClass: 'datepicker_vista'
			});
			new Picker.Date('vista2', {
				pickerClass: 'datepicker_vista'
			});
		});
</script>  
</head>
<body>
	<html:form action="/dashLeave.do">
	<div class="outerbox">
		<div class="mainHeading">
			<div class=""
				style="width: 360px; height: 32px; background: url(images/formTitleBackground.png) no-repeat top right; font-color: #CC0000;">
				<h2 class="formTitle">LEAVE STATISTICS</h2>
			</div>
		</div> 
		<div> 
			<br class="clear" />
			&nbsp;&nbsp;
			From Date: <html:text property="fromDateStr" styleId="vista1" style="width:170px;"/>
			&nbsp;&nbsp;&nbsp;
			To Date: <html:text property="toDateStr" styleId="vista2" style="width:170px;"/>
			<br class="clear" />
			<br class="clear" />
			<br class="clear" />
			<br class="clear" />
			<div class="actionbar_form" style="border-top: 2px solid #191919;">
				<div class="actionbuttons">
					<br class="clear" />
					<html:submit styleClass="plainbtn" value="Search">Search</html:submit> 
					<html:reset styleClass="plainbtn">Reset</html:reset>
				</div>
			</div>
			<br class="clear" />
			<br class="clear" />
		</div>
	</div>
	<div class="outerbox"> 
		<br class="clear" />
		<br class="clear" /> 
		
		<table>
			<tr>
	            <td><div id="graph"></div></td>
				<td><div id="graph2"></div></td>
				<td><div id="graph3"></div></td>
			</tr>
        </table>
		
         <script type="text/javascript"> 
         var colorsEx = ['#006CFF', '#FF6600', '#34A038', '#945D59', '#93BBF4', '#F493B8', 
			                '#006600', '#0066FF', '#FF9999', '#00CC00', '#FF6666', '#CCFF99', '#FFFFCC',
			                '#CCCCFF', '#FFCC66', '#99CC00', '#660000', '#660033', '#990000', '#336633'];
			    var partsName = "<%=(String)request.getAttribute("pie_partsName")%>";
			    var partsNumber = "<%=(String)request.getAttribute("pie_partsNumber")%>";
			   	var totalLeaveDays = "<%=(Float)request.getAttribute("pie_totalLeaveDays")%>";
			   	var pie_topic = "<%=(String)request.getAttribute("pie_topic")%>";
			   	
			   	if(partsNumber != null && partsNumber != '' && partsNumber != 'null'){
	  		    	var indexesNumber = partsNumber.split(';');
	      		    var indexesName = partsName.split(';');
		     		   var myChart = new JSChart('graph', 'pie');
		     		   var count = 0;
		     		   for(var i = 0; i < indexesNumber.length; i ++){
		     			  if(parseFloat(indexesNumber[i]) != 0){
		     				  count ++;
		     			  }
		     		   }
		     		    var dataArr = new Array(count);
		     		    var idArr = 0;
		     		    for(var i = 0; i < indexesNumber.length; i ++){
		     		    	if(parseFloat(indexesNumber[i]) != 0){
		     		    		dataArr[idArr] = new Array(2);
			     		    	dataArr[idArr][1] = parseFloat(indexesNumber[i]);
			     		    	var percent = dataArr[idArr][1] * 100 / totalLeaveDays;
			     		    	dataArr[idArr][0] = percent.toFixed(1) + '%';
			     		    	myChart.setLegend(colorsEx[idArr], indexesName[i]);
			     		    	idArr ++;
		     		    	} 
		     		    } 
						myChart.setDataArray(dataArr);
						myChart.colorize(colorsEx.slice(0, count)); 
						myChart.setTitle(pie_topic);
						myChart.setTitleFontFamily('Times New Roman');
						myChart.setTitleFontSize(14);
						myChart.setTitleColor('#0F0F0F');
						myChart.setPieRadius(110);
						myChart.setPieValuesColor('#FFFFFF');
						myChart.setLegendColor('#0F0F0F');
						myChart.setPieUnitsColor('#0F0F0F');
						myChart.setPieValuesFontSize(9); 
						myChart.setShowXValues(true);
						myChart.setLegendShow(true);
						myChart.setLegendFontFamily('Times New Roman');
						myChart.setLegendFontSize(10);
						
						myChart.setSize(400, 400);
						myChart.setPiePosition(145, 160);
						myChart.setLegendPosition(250, 280);
						
						myChart.setPieAngle(40);
						myChart.set3D(true); 
						myChart.draw();
	  		    }
		</script>  
		
		
		<script type="text/javascript">
		    var bar_partsName = "<%=(String)request.getAttribute("bar_partsName")%>";
		    var bar_partsNumber = "<%=(String)request.getAttribute("bar_partsNumber")%>";
		    var bar_topic = "<%=(String)request.getAttribute("bar_topic")%>";
			if(bar_partsNumber != null && bar_partsNumber != '' && bar_partsNumber != 'null'){
				// var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
				var months = bar_partsName.split(';');
				var myData = new Array(12);
				var indexesNumber = bar_partsNumber.split(';');
				for(var i = 0; i < 12; i ++){
					myData[i] = new Array(2);
					myData[i][0] = months[i];
					myData[i][1] = parseFloat(indexesNumber[i]);
				}
				var colors = ['#CE0000', '#EF2323', '#D20202', '#A70000', '#850000', '#740000', '#530000', '#850000', '#B00000', '#9C0404', '#CE0000', '#BA0000'];
				var myChart = new JSChart('graph2', 'bar');
				myChart.setDataArray(myData);
				myChart.setSize(380, 360);
				myChart.colorizeBars(colors);
				myChart.setTitleColor('#0F0F0F');
				myChart.setTitle(bar_topic);
				myChart.setTitleFontFamily('Times New Roman');
				myChart.setTitleFontSize(14);
				myChart.setAxisColor('#0F0F0F');
				myChart.setAxisWidth(1);
				myChart.setAxisNameX('Months');
				myChart.setAxisNameY('Values');
				myChart.setAxisNameColor('#0F0F0F');
				myChart.setAxisNameFontSize(9);
				myChart.setAxisPaddingLeft(40);
				myChart.setAxisValuesDecimals(1);
				myChart.setAxisValuesColor('#0F0F0F');
				myChart.setTextPaddingLeft(0);
				myChart.setBarValuesColor('#0F0F0F');
				myChart.setBarBorderWidth(0);
				myChart.setGridColor('#5D5F5D');
				myChart.setAxisPaddingBottom(120);
				myChart.draw();
			}
		</script>
		
		<script type="text/javascript">
		    var bar_partsNumber = "<%=(String)request.getAttribute("bar2_partsNumber")%>";
		    var bar_partsName = "<%=(String)request.getAttribute("bar2_partsName")%>";
		    var bar2_topic = "<%=(String)request.getAttribute("bar2_topic")%>";
		    if(bar_partsNumber != null && bar_partsNumber != '' && bar_partsNumber != 'null'){
				var months = bar_partsName.split(";");
				var myData = new Array(months.length);
				var indexesNumber = bar_partsNumber.split(';');
				for(var i = 0; i < months.length; i ++){
					myData[i] = new Array(2);
					myData[i][0] = months[i];
					myData[i][1] = parseFloat(indexesNumber[i]);
				}
				var colors = ['#7979DB', '#7952E9', '#792BC8', '#792BA1', '#792BA1', '#792B79',
				              '#7979DB', '#7952E9', '#792BC8', '#792BA1', '#792BA1', '#792B79',
				              '#7979DB', '#7952E9', '#792BC8', '#792BA1', '#792BA1', '#792B79'];
				colors = colors.slice(0, months.length);
				
				var myChart = new JSChart('graph3', 'bar');
				myChart.setDataArray(myData);
				myChart.colorizeBars(colors); 
				myChart.setTitleColor('#0F0F0F');
				myChart.setTitle(bar2_topic);
				myChart.setTitleFontFamily('Times New Roman');
				myChart.setTitleFontSize(14);
				myChart.setAxisColor('#0F0F0F');
				myChart.setAxisWidth(1);
				myChart.setAxisNameX('Sub Unit');
				myChart.setAxisNameY('');
				myChart.setAxisNameColor('#0F0F0F');
				myChart.setAxisNameFontSize(9);
				myChart.setAxisPaddingLeft(50);
				myChart.setAxisValuesDecimals(1);
				myChart.setAxisValuesColor('#0F0F0F');
				myChart.setTextPaddingLeft(0);
				myChart.setBarValuesColor('#0F0F0F');
				myChart.setBarBorderWidth(1);
				myChart.setBarBorderColor('#FFFFFF');
				myChart.setGridColor('#5D5F5D');
				myChart.setAxisValuesAngle(30);
				myChart.setBarOpacity(0.55);
				myChart.setAxisPaddingBottom(120);
				myChart.setSize(430, 360);
				myChart.set3D(true); 
				myChart.draw();
		    }
		</script>  
		
	</div> 
	</html:form>
</body>
</html>